<template>
<view class="page__bd">
	<swiper class="screen-swiper square-dot" :indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
		<swiper-item v-for="(item,index) in slideList" :key="index" @tap="openPageLink(item.page_flag, item.page_data, item.page_extra)">
			<image :src="item.picurl" mode="aspectFill"></image>
		</swiper-item>
	</swiper>
	<view style="height:1.5rem;" class="bg-white">
		<view class="daui-cell shopsearch">
			<view class="daui-cell__hd" @click="showSearchPopup">
				<image class="shopsearch-img" src="/static/images/shop/search.png" mode="scaleToFill"></image>
				<text class="shopsearch-txt">搜索</text>
			</view>
			<view class="daui-cell__bd">
				<view class="shopsearch-hits">曝光量：<text class="text-blue">{{coreInfo.hit_num}}次</text></view>
				<view class="shopsearch-hits margin-left-xs">已入驻：<text class="text-blue">{{coreInfo.enter_num}}家</text></view>
			</view>
		</view>
	</view>
	<!-- 图标导航 -->
	<view class="daui-list home-icon grid col-4 no-border">
		<view hover-class="none" class="daui-item" v-for="(item,index) in categoryList" :key="index" @tap="openShopList(item.id)">
			<view class="ellipseIcon">
				<image :src="item.picurl" mode="aspectFill"></image>
				<view class="cu-tag badge" v-if="item.badge">
					<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
				</view>
			</view>
			<text>{{item.name}}</text>
		</view>
	</view>
	<view class="toutiao-wrap">
		<view class="daui-cell toutiao-cell">
			<view class="daui-cell__hd">商圈快报</view>
			<view class="daui-cell__bd">
				<swiper :indicator-dots="false" vertical="true" autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item,index) in fastnewsList" :key="index">
						<view class="swiper-item uni-bg-red">
							<image :src="item.avatar"></image><text class="toutiao-green">{{item.name}}</text><text class="margin-left-xs">{{item.title}}</text><text class="margin-left-xs">{{item.autotime}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="daui-cell__ft">
				<view class="toutiao-txt" @click="openShopEnter">我要入驻</view>
			</view>
		</view>
	</view>
	<block v-for="(item,index) in shopList" :key="index">
		<view class="daui-media daui-media_appmsg daui-media_product" @tap="openShopDetail(item.id)">
			<view class="daui-media__hd">
				<image :src="item.logo"></image>
			</view>
			<view class="daui-media__bd">
				<view class="daui-media__title">{{item.name}}</view>
				<view class="daui-media__second text-red" v-if="item.notice"><text class="iconfontzz icon-notice margin-right-xs"></text>{{item.notice}}</view>
				<view class="daui-media__second text-gray"><text class="iconfontzz icon-mudedi margin-right-xs"></text>{{item.address}}</view>
			</view>
			<view class="daui-media__ft">
				<text class="iconfontzz text-cyan text-xxl" @click="phoneCall(item.phone)">&#xe655;</text>
			</view>
		</view>
	</block>
	<view class="daui-load" :class="!loadding?'loading':'over'"><view class="daui-load-in"><view class="daui-nomore-text"></view></view></view>
	
	<uni-popup ref="searchPopup" type="bottom">
		<view class="daui-fullpopup search-custom">
			<view class="daui-bar bg-white">
				<view class="content text-bold">
					搜索
				</view>
			</view>
			<view class="daui-fullpopup__bd">
				<view class="daui-cells daui-cells_form">
					<view class="daui-cell">
						<view class="daui-cell__bd">
							<view class="search-form round">
								<label class="daui-label" style="width:auto"><text class="iconfontzz icon-search"></text></label>
								<input type="search" id="searchInput" placeholder="找店铺、找商家、找美食" name="keyword" @input="keyInput" :value="keyWord" required="required">
								<view class="icon-roundclosefill text-xl text-grey padding-right-sm" v-if="keyWord!=''" @tap="clearKey"></view>
							</view>
						</view>
						<view class="daui-cell__ft">
							<text class="text-orange" @tap="searchByKeyword(keyWord)">搜索</text>
						</view>
					</view>
				</view>
			</view>
			<view class="daui-fullpopup__ft flex flex-direction">
				<button class="daui-btn bg-red round" @click="hideSearchPopup">取消</button>
			</view>
		</view>
	</uni-popup>
	
	<!--toast提示-->
	<daui-toast ref="toast"></daui-toast>
</view>
</template>

<script>
import danceuiTool from '../../utils/danceuiTool';
import http from "../../server/api-shop.js";
export default {
	data() {
		return {
			keyWord: '',
			coreInfo: {},
			categoryList: [],
			fastnewsList: [],
			slideList: [],
			shopList: [],
			list_param:{
				p:1
			},
			nowPage:1,
			loadding: false,
			pullUpOn: true,
			scrollTop: 0
		}
	},
	// computed: {
	// 	style() {
	// 		var StatusBar = this.StatusBar;
	// 		var CustomBar = this.CustomBar;
	// 		var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
	// 		return style
	// 	},
	// 	CustomH() {
	// 		return this.CustomBar + uni.upx2px(100)
	// 	},
	// 	keyListStyle() {
	// 		var CustomBar = this.CustomBar;
	// 		var fixedBar = uni.upx2px(100);
	// 		var keyListStyle = `top:${CustomBar + fixedBar}px;height:calc(100vh - ${CustomBar + fixedBar}px);`;
	// 		return keyListStyle
	// 	}
	// },
	onLoad(){
		//this.getData();
	},
	onReady(){
		this.getData();
	},
	onPullDownRefresh(){
		console.log('=====上拉刷新refresh');
		this.list_param = {...this.list_param,p:1}
		this.getData();
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 200);
	},
	async onReachBottom() {
		console.log('=====拉到底部onReachBottom');
		if (!this.pullUpOn) return;
		this.loadding = true;
		const token = uni.getStorageSync('token');
		let headers = {"Authorization":"Bearer "+token};
		this.list_param = {...this.list_param,p:++this.nowPage}
		let ret = await http.shopIndex(this.$refs.toast, this.list_param, headers);
		var retData = ret.data;
		if(retData.shopList){
			this.shopList = [...this.shopList,...retData.shopList];
			this.nowPage = this.nowPage + 1;
		}else{
			this.loadding = false;
			this.pullUpOn = false;
		}
	},	onPageScroll(e) {		this.scrollTop = e.scrollTop;	},
	methods: {
		async getData(){ //请求并获取数据
			console.log('this.$refs:', this.$refs);
			console.log('this.$refs.searchPopup:', this.$refs.searchPopup);
			console.log('this.$refs.toast:', this.$refs.toast);
			const token = uni.getStorageSync('token');
			let headers = {"Authorization":"Bearer "+token};
			let ret = await http.shopIndex(this.$refs.toast, this.list_param, headers);
			var retData = ret.data;
			console.log('shopList页面,获取到的数据：', retData);
			this.coreInfo = retData.coreInfo;
			this.categoryList = retData.categoryList;
			this.slideList = retData.slideList;
			this.fastnewsList = retData.fastnewsList;
			this.shopList = retData.shopList;
			this.loadding = true;
		},
		// 键入关键词
		keyInput(e) {
			this.keyWord = e.detail.value;
			this.goodsList = [];
			this.showGoods = false;
			if (e.detail.cursor > 0) {
				this.showSearchKeyList();
			} else {
				this.searchKeyList = []
			}
		},
		// 清除关键词
		clearKey(e) {
			this.keyWord = '';
			this.searchKeyList = [];
			this.goodsList = [];
			this.showGoods = false;
		},
		// 根据关键词搜索商品
		async searchByKeyword(keyword) {
			// console.log('搜索的关键词是:', keyword);
			// const token = uni.getStorageSync('token');
			// let headers = {"Authorization":"Bearer "+token};
			// var param = {
			// 	keyword: keyword
			// }
			// let retData = await http.shopDoSearch(param, headers);
			// console.log('shopDoSearch操作,获取到的数据：', retData);
			// this.shopList = retData.shopList;
			// this.$refs.searchPopup.close();
			uni.navigateTo({
				url: '/pages/shop/shopList?keyword='+keyword
			})
		},
		openPageLink(page_flag, page_data, page_extra){
			danceuiTool.dealLink(page_flag, page_data, page_extra);
		},
		phoneCall(tel){
			uni.makePhoneCall({
				phoneNumber: tel
			});
		},
		openShopList(cid) {
			uni.navigateTo({
				url: '/pages/shop/shopList?cid='+cid
			})
		},
		openShopDetail(shid) {
			uni.navigateTo({
				url: '/pages/shop/shopDetail?shid='+shid
			})
		},
		openShopEnter() {
			uni.navigateTo({
				url: '/pagesA/shop/enter'
			})
		},
		showSearchPopup(e){
			console.log('this.$refs:', this.$refs)
			console.log('this.$refs.searchPopup:', this.$refs.searchPopup)
			console.log('this.$refs.toast:', this.$refs.toast)
			this.$refs.searchPopup.open();
		},
		hideSearchPopup(){
			this.$refs.searchPopup.close();
		},
	}
}
</script>

<style>
/*浮动按钮*/
.enter-float {
	/* #ifndef MP-WEIXIN */
	bottom: 200rpx;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	bottom: 200rpx;
	/* #endif */
	position: fixed;
	right: 20rpx;
	height: 120upx;
	box-shadow: none;
}
.enter-float .enter-float-btn{}
.enter-float .iconfontzz{}
.enter-float .enter-float-txt{line-height: 26rpx;font-size: 16rpx;}
</style>
